<!-- 表格组件 -->
<template>
  <el-table :data="data" border stripe height="1000" ref="table">
    <template v-for="{ prop, label, format, width } in showColumns">
      <!-- 需要处理数据后 显示的列 -->
      <template v-if="$scopedSlots[prop]">
        <el-table-column :label="label" :key="prop">
          <template slot-scope="{ row, $index }">
            <slot v-bind="{ row, $index }" :name="prop" />
          </template>
        </el-table-column>
      </template>
      <!-- 普通显示列 -->
      <template v-else>
        <el-table-column :prop="prop" :label="label" :width="width" :key="prop">
          <template slot-scope="{ row }">
            <!-- 排除null, undifind 等值 -->
            <span v-if="returnEffectiveVal(row[prop]) === false">--</span>
            <span v-else>{{
              format ? format(row[prop], row) : row[prop]
            }}</span>
          </template>
        </el-table-column>
      </template>
    </template>

    <!-- 操作列 -->
    <slot v-if="$scopedSlots['default']" name="default" />
  </el-table>
</template>

<script>
export default {
  props: ['data', 'columns', 'lessShowCount'],
  data() {
    return {
      // showColumns: [],
      // moreShowColumns: [],
    }
  },
  computed: {
    showColumns() {
      const isLessShow = this.lessShowCount

      if (!isLessShow) return this.columns

      return this.columns.slice(0, this.lessShowCount)

      // this.moreShowColumns = this.columns.slice(
      //     this.lessShowCount,
      //     this.columns.length
      // );
    }
  },
  methods: {
    // 解决 vue {{}} 中不支持 ?? 的问题, 双问号 判断 0 为 true
    format(value) {
      return value ?? '--'
    },

    // 返回有效值, 排除null, undifind 等值, 但包括 0
    returnEffectiveVal(value) {
      return value ?? false
    }
  },
  mounted() {
    // const table = this.$refs['table']
    // console.log(table);
  }
}
</script>

<style>
</style>
